import TodoHeader from "./TodoHeader";
import TodoContent from "./TodoContent";
import "./index.scss";
import { useState } from "react";

export interface Todo {
  name: string;
  checked: boolean;
  done: boolean;
  id: string;
}
interface Action {
  type: "ADD" | "REMOVE" | "TOGGLE" | "UPDATE";
  todo: Todo;
}
function TodoList() {
  const [todoList, setTodoList] = useState<Todo[]>([]);

  function setTodoListHandler(action: Action) {
    switch (action.type) {
      case "ADD":
        setTodoList([...todoList, action.todo]);
        break;
      case "REMOVE":
        setTodoList(todoList.filter((todo) => todo.id !== action.todo.id));
        break;
      case "UPDATE":
        setTodoList(
          todoList.map((todo) =>
            todo.id === action.todo.id ? action.todo : todo
          )
        );
        break;
      default:
        break;
    }
  }

  return (
    <>
      <div className="todoList">
        <TodoHeader
          addHandler={(todo: Todo) => setTodoListHandler({ todo, type: "ADD" })}
        ></TodoHeader>
        <TodoContent
          todoList={todoList}
          removeHandler={(todo: Todo) =>
            setTodoListHandler({ todo, type: "REMOVE" })
          }
          updateHandler={(todo: Todo) =>
            setTodoListHandler({ todo, type: "UPDATE" })
          }
        ></TodoContent>
      </div>
    </>
  );
}

export default TodoList;
